<template>
  <view class="trust-fragment-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <text class="page-title">信任碎片</text>
      <text class="page-subtitle">接收好友分享的信任关系</text>
    </view>

    <!-- 碎片信息 -->
    <view class="fragment-info" v-if="fragmentData">
      <view class="fragment-card">
        <view class="card-header">
          <text class="card-icon">{{ fragmentData.cardIcon }}</text>
          <text class="card-name">{{ fragmentData.cardName }}</text>
          <view class="trust-badge" :class="getTrustLevel(fragmentData.trustValue)">
            <text class="badge-text">{{ getTrustLevelText(fragmentData.trustValue) }}</text>
          </view>
        </view>
        
        <view class="trust-progress">
          <view class="progress-label">
            <text class="label-text">信任值</text>
            <text class="value-text">{{ fragmentData.trustValue }}/100</text>
          </view>
          <view class="progress-bar">
            <view 
              class="progress-fill" 
              :style="{ width: fragmentData.trustValue + '%' }"
              :class="getTrustLevel(fragmentData.trustValue)"
            ></view>
          </view>
        </view>
        
        <view class="share-message">
          <text class="message-label">分享消息</text>
          <text class="message-text">{{ fragmentData.message }}</text>
        </view>
        
        <view class="fragment-meta">
          <text class="meta-item">来自: {{ fragmentData.senderName || '未知用户' }}</text>
          <text class="meta-item">时间: {{ formatTime(fragmentData.timestamp) }}</text>
        </view>
      </view>
    </view>

    <!-- 接收操作 -->
    <view class="receive-actions" v-if="fragmentData">
      <view class="action-header">
        <text class="action-title">接收信任碎片</text>
        <text class="action-desc">选择如何处理这个信任碎片</text>
      </view>
      
      <view class="action-options">
        <button 
          class="action-btn accept" 
          @click="acceptFragment"
          :disabled="!canAccept"
        >
          <text class="btn-icon">✅</text>
          <text class="btn-text">接受信任</text>
          <text class="btn-desc">获得信任值 +{{ getTrustReward() }}</text>
        </button>
        
        <button 
          class="action-btn enhance" 
          @click="enhanceFragment"
          :disabled="!canEnhance"
        >
          <text class="btn-icon">💎</text>
          <text class="btn-text">增强信任</text>
          <text class="btn-desc">消耗积分增强信任值</text>
        </button>
        
        <button 
          class="action-btn decline" 
          @click="declineFragment"
        >
          <text class="btn-icon">❌</text>
          <text class="btn-text">拒绝信任</text>
          <text class="btn-desc">不接收此信任碎片</text>
        </button>
      </view>
    </view>

    <!-- 信任效果预览 -->
    <view class="trust-effects-preview" v-if="fragmentData">
      <text class="effects-title">信任效果预览</text>
      <view class="effects-list">
        <view 
          class="effect-item" 
          v-for="effect in getTrustEffects(fragmentData.trustValue)" 
          :key="effect.id"
        >
          <text class="effect-icon">{{ effect.icon }}</text>
          <view class="effect-content">
            <text class="effect-name">{{ effect.name }}</text>
            <text class="effect-desc">{{ effect.description }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 错误状态 -->
    <view class="error-state" v-if="!fragmentData && !loading">
      <text class="error-icon">❌</text>
      <text class="error-title">信任碎片无效</text>
      <text class="error-desc">无法加载信任碎片，请检查链接是否正确</text>
      <button class="retry-btn" @click="retryLoad">
        <text class="btn-text">重新加载</text>
      </button>
    </view>

    <!-- 加载状态 -->
    <view class="loading-state" v-if="loading">
      <text class="loading-icon">⏳</text>
      <text class="loading-text">正在加载信任碎片...</text>
    </view>

    <!-- 成功提示 -->
    <view class="success-modal" v-if="showSuccessModal" @click="closeSuccessModal">
      <view class="modal-content" @click.stop>
        <view class="success-header">
          <text class="success-icon">🎉</text>
          <text class="success-title">信任碎片接收成功</text>
        </view>
        
        <view class="success-content">
          <text class="success-text">{{ successMessage }}</text>
          <view class="reward-info">
            <text class="reward-label">获得奖励</text>
            <text class="reward-value">+{{ getTrustReward() }} 信任值</text>
          </view>
        </view>
        
        <view class="success-actions">
          <button class="success-btn" @click="closeSuccessModal">
            <text class="btn-text">确定</text>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import trustCardManager from '@/utils/trust-card-manager.js'

export default {
  name: 'TrustFragmentPage',
  data() {
    return {
      fragmentData: null,
      loading: true,
      showSuccessModal: false,
      successMessage: '',
      fragmentId: ''
    }
  },
  
  computed: {
    canAccept() {
      return this.fragmentData && this.fragmentData.trustValue > 0
    },
    
    canEnhance() {
      // 检查是否有足够的积分进行增强
      return this.fragmentData && this.fragmentData.trustValue < 100
    }
  },
  
  onLoad(options) {
    this.fragmentId = options.id
    this.loadFragment()
  },
  
  methods: {
    // 加载信任碎片
    loadFragment() {
      this.loading = true
      
      // 模拟从URL参数或API加载碎片数据
      setTimeout(() => {
        const fragmentData = this.parseFragmentFromUrl()
        if (fragmentData) {
          this.fragmentData = fragmentData
        }
        this.loading = false
      }, 1000)
    },
    
    // 从URL解析碎片数据
    parseFragmentFromUrl() {
      // 这里应该从URL参数中解析碎片数据
      // 暂时返回模拟数据
      return {
        cardId: 'cooperation_card',
        cardName: '协作卡',
        cardIcon: '🤝',
        trustValue: 75,
        message: '我有一张协作卡，信任值75%，想要分享给你！',
        senderName: '好友用户',
        timestamp: new Date().toISOString()
      }
    },
    
    // 接受信任碎片
    acceptFragment() {
      if (!this.canAccept) return
      
      // 更新信任值
      const reward = this.getTrustReward()
      trustCardManager.updateCardTrust(this.fragmentData.cardId, reward, '接收信任碎片')
      
      this.successMessage = `成功接收${this.fragmentData.cardName}的信任碎片！`
      this.showSuccessModal = true
      
      // 记录接收行为
      this.recordFragmentReceive('accept')
    },
    
    // 增强信任碎片
    enhanceFragment() {
      if (!this.canEnhance) return
      
      uni.showModal({
        title: '增强信任',
        content: '消耗10积分将信任值提升到100%，确定要增强吗？',
        success: (res) => {
          if (res.confirm) {
            // 消耗积分
            // pointsManager.spendPoints(10, '增强信任碎片')
            
            // 增强信任值
            const enhanceValue = 100 - this.fragmentData.trustValue
            trustCardManager.updateCardTrust(this.fragmentData.cardId, enhanceValue, '增强信任碎片')
            
            this.successMessage = `成功增强${this.fragmentData.cardName}的信任值！`
            this.showSuccessModal = true
            
            // 记录增强行为
            this.recordFragmentReceive('enhance')
          }
        }
      })
    },
    
    // 拒绝信任碎片
    declineFragment() {
      uni.showModal({
        title: '拒绝信任',
        content: '确定要拒绝这个信任碎片吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '已拒绝信任碎片',
              icon: 'success'
            })
            
            // 记录拒绝行为
            this.recordFragmentReceive('decline')
            
            // 返回上一页
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          }
        }
      })
    },
    
    // 获取信任奖励
    getTrustReward() {
      if (!this.fragmentData) return 0
      return Math.floor(this.fragmentData.trustValue / 10)
    },
    
    // 获取信任等级
    getTrustLevel(trustValue) {
      if (trustValue >= 80) return 'high'
      if (trustValue >= 50) return 'medium'
      if (trustValue >= 20) return 'low'
      return 'broken'
    },
    
    // 获取信任等级文本
    getTrustLevelText(trustValue) {
      const levels = {
        high: '高度信任',
        medium: '一般信任',
        low: '低度信任',
        broken: '信任破裂'
      }
      return levels[this.getTrustLevel(trustValue)] || '未知'
    },
    
    // 获取信任效果
    getTrustEffects(trustValue) {
      const effects = []
      
      if (trustValue >= 80) {
        effects.push({
          id: 'perfect_trust',
          name: '完美信任',
          icon: '💎',
          description: '获得完美信任状态，所有效果翻倍'
        })
      }
      
      if (trustValue >= 60) {
        effects.push({
          id: 'cooperation_boost',
          name: '协作加成',
          icon: '🤝',
          description: '协作效果提升30%'
        })
      }
      
      if (trustValue >= 40) {
        effects.push({
          id: 'trust_bond',
          name: '信任纽带',
          icon: '🔗',
          description: '建立信任纽带，获得额外奖励'
        })
      }
      
      return effects
    },
    
    // 记录碎片接收行为
    recordFragmentReceive(action) {
      // 这里可以记录到分析系统
      console.log(`Fragment receive action: ${action}`, {
        fragmentId: this.fragmentId,
        cardId: this.fragmentData.cardId,
        trustValue: this.fragmentData.trustValue,
        action: action,
        timestamp: new Date().toISOString()
      })
    },
    
    // 重新加载
    retryLoad() {
      this.loadFragment()
    },
    
    // 关闭成功弹窗
    closeSuccessModal() {
      this.showSuccessModal = false
      setTimeout(() => {
        uni.navigateBack()
      }, 500)
    },
    
    // 格式化时间
    formatTime(timestamp) {
      const date = new Date(timestamp)
      return date.toLocaleString()
    }
  }
}
</script>

<style scoped>
.trust-fragment-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20rpx;
}

/* 页面头部 */
.page-header {
  text-align: center;
  margin-bottom: 30rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.page-subtitle {
  font-size: 24rpx;
  color: #666;
}

/* 碎片信息 */
.fragment-info {
  margin-bottom: 30rpx;
}

.fragment-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.card-icon {
  font-size: 40rpx;
  margin-right: 16rpx;
}

.card-name {
  flex: 1;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.trust-badge {
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  font-weight: bold;
}

.trust-badge.high {
  background: #4caf50;
  color: white;
}

.trust-badge.medium {
  background: #ff9800;
  color: white;
}

.trust-badge.low {
  background: #ff5722;
  color: white;
}

.trust-badge.broken {
  background: #f44336;
  color: white;
}

.badge-text {
  font-size: 18rpx;
}

/* 信任进度 */
.trust-progress {
  margin-bottom: 20rpx;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.label-text {
  font-size: 24rpx;
  color: #666;
  font-weight: bold;
}

.value-text {
  font-size: 24rpx;
  color: #333;
  font-weight: bold;
}

.progress-bar {
  width: 100%;
  height: 12rpx;
  background: #e0e0e0;
  border-radius: 6rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 6rpx;
  transition: width 0.5s ease;
}

.progress-fill.high {
  background: linear-gradient(90deg, #4caf50, #8bc34a);
}

.progress-fill.medium {
  background: linear-gradient(90deg, #ff9800, #ffc107);
}

.progress-fill.low {
  background: linear-gradient(90deg, #ff5722, #ff7043);
}

.progress-fill.broken {
  background: linear-gradient(90deg, #f44336, #e57373);
}

/* 分享消息 */
.share-message {
  margin-bottom: 20rpx;
}

.message-label {
  font-size: 22rpx;
  color: #666;
  display: block;
  margin-bottom: 8rpx;
}

.message-text {
  font-size: 24rpx;
  color: #333;
  line-height: 1.4;
  background: #f8f9fa;
  padding: 16rpx;
  border-radius: 8rpx;
}

/* 碎片元数据 */
.fragment-meta {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.meta-item {
  font-size: 20rpx;
  color: #999;
}

/* 接收操作 */
.receive-actions {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);
}

.action-header {
  text-align: center;
  margin-bottom: 24rpx;
}

.action-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.action-desc {
  font-size: 22rpx;
  color: #666;
}

.action-options {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  border: none;
  border-radius: 12rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.action-btn.accept {
  background: linear-gradient(135deg, #4caf50, #8bc34a);
  color: white;
  box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
}

.action-btn.enhance {
  background: linear-gradient(135deg, #ff9800, #ffc107);
  color: white;
  box-shadow: 0 4rpx 12rpx rgba(255, 152, 0, 0.3);
}

.action-btn.decline {
  background: linear-gradient(135deg, #f44336, #e57373);
  color: white;
  box-shadow: 0 4rpx 12rpx rgba(244, 67, 54, 0.3);
}

.action-btn:hover {
  transform: translateY(-2rpx);
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-icon {
  font-size: 32rpx;
  margin-bottom: 8rpx;
}

.btn-text {
  font-size: 24rpx;
  font-weight: bold;
  margin-bottom: 4rpx;
}

.btn-desc {
  font-size: 18rpx;
  opacity: 0.8;
}

/* 信任效果预览 */
.trust-effects-preview {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);
}

.effects-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.effects-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.effect-item {
  display: flex;
  align-items: center;
  padding: 12rpx 16rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
}

.effect-icon {
  font-size: 24rpx;
  margin-right: 12rpx;
}

.effect-content {
  flex: 1;
}

.effect-name {
  font-size: 20rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 2rpx;
}

.effect-desc {
  font-size: 18rpx;
  color: #666;
}

/* 错误状态 */
.error-state {
  text-align: center;
  padding: 80rpx 20rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);
}

.error-icon {
  font-size: 80rpx;
  display: block;
  margin-bottom: 20rpx;
}

.error-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
}

.error-desc {
  font-size: 22rpx;
  color: #666;
  margin-bottom: 24rpx;
}

.retry-btn {
  background: #667eea;
  color: white;
  border: none;
  padding: 12rpx 24rpx;
  border-radius: 8rpx;
  font-size: 20rpx;
  cursor: pointer;
}

/* 加载状态 */
.loading-state {
  text-align: center;
  padding: 80rpx 20rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);
}

.loading-icon {
  font-size: 60rpx;
  display: block;
  margin-bottom: 20rpx;
  animation: spin 1s linear infinite;
}

.loading-text {
  font-size: 24rpx;
  color: #666;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 成功弹窗 */
.success-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  width: 90%;
  max-width: 500rpx;
  background: white;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.3);
}

.success-header {
  text-align: center;
  padding: 30rpx;
  background: linear-gradient(135deg, #4caf50, #8bc34a);
  color: white;
}

.success-icon {
  font-size: 60rpx;
  display: block;
  margin-bottom: 12rpx;
}

.success-title {
  font-size: 28rpx;
  font-weight: bold;
}

.success-content {
  padding: 30rpx;
  text-align: center;
}

.success-text {
  font-size: 24rpx;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.reward-info {
  background: #f8f9fa;
  border-radius: 8rpx;
  padding: 16rpx;
}

.reward-label {
  font-size: 20rpx;
  color: #666;
  display: block;
  margin-bottom: 4rpx;
}

.reward-value {
  font-size: 24rpx;
  font-weight: bold;
  color: #4caf50;
}

.success-actions {
  padding: 30rpx;
  text-align: center;
}

.success-btn {
  background: #4caf50;
  color: white;
  border: none;
  padding: 12rpx 24rpx;
  border-radius: 8rpx;
  font-size: 20rpx;
  cursor: pointer;
}

/* 响应式设计 */
@media (max-width: 768rpx) {
  .trust-fragment-page {
    padding: 16rpx;
  }
  
  .fragment-card,
  .receive-actions,
  .trust-effects-preview {
    padding: 24rpx;
  }
  
  .action-options {
    gap: 12rpx;
  }
  
  .action-btn {
    padding: 16rpx;
  }
}
</style>

